
<template>
  <div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">组件类型</div>
      <div class="w-3/4">
        <a-input type="text" disabled v-model:value="current.component" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">选择标识</div>
      <div class="w-3/4">
        <a-input type="text" placeholder="用于$('')查询"  v-model:value.trim="current.selector" />
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">标签位置</div>
      <div class="w-3/4">
        <a-radio-group
          v-model:value="current.componentProps.labelPosition"
          button-style="solid"
          option-type="button"
          :options="[
            { label: '水平', value: 'horizontal' },
            { label: '垂直', value: 'vertical' },
          ]"
        >
        </a-radio-group>
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">展示列数</div>
      <div class="w-3/4">
        <a-radio-group
          v-model:value="current.componentProps.gridTemplateColumns"
          option-type="button"
          button-style="solid"
          :options="[
            { label: '一列', value: 1 },
            { label: '二列', value: 2 },
            { label: '三列', value: 3 },
           ]"
        >
        </a-radio-group>

      </div>
    </div>
    <!-- <div class="flex items-center p-10">
      <div class="w-1/4 text-14">标签宽度</div>
      <div class="w-3/4">
        <a-input-number
          v-model:value.number="current.componentProps.labelWidth"
          :min="1"
          :max="200"
        />
      </div>
    </div> -->
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">尺寸控制</div>
      <div class="w-3/4">
        <a-radio-group
          v-model:value="current.componentProps.size"
          option-type="button"
          button-style="solid"
          :options="[
            { label: 'large', value: 'large' },
            { label: 'default', value: 'default' },
            { label: 'small', value: 'small' },
          ]"
        >
        </a-radio-group>
      </div>
    </div>
    <div class="flex items-center p-10">
      <div class="w-1/4 text-14">功能描述</div>
      <div class="w-3/4">
        <a-input type="text" v-model:value="current.describe" />
      </div>
    </div>
  </div>
</template>
 
<script lang="ts">
import { Component } from "@/components/low-code/core/";
import { defineComponent, reactive, computed } from "vue";

export default defineComponent({
  name: "cardSetting",
  props: ["current"],
  setup(props) {
    const component = reactive<Component>(props.current);
    let lowCode = component.getLowCodeInstance();

    return { lowCode };
  },
});
</script>

<style  scoped>
</style>
